<template>
<div class="box4">
  <h1 style="margin-left: 30px">精选歌单</h1>
  <div class="highbox">
    <div class="highList" v-for="item in HighqualityList" :key="item">
            <img :src="item.coverImgUrl" class="img" @click="getListdetail(item.id)">
            <p>{{item.name}}</p>
    </div>
  </div>

  <h1 style="margin-left: 30px">最新新碟</h1>
  <div class="hotbox">
    <div class="hotList" v-for="item in HotList" :key="item">
      <img :src="item.picUrl" class="img" @click="getalbumdetail(item.id)">
      <p>{{item.name}}</p>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {useplayListStore,useSongsStore,usealbumDetailStore} from "@/Store/Pinia/pinia";
import { useRouter } from "vue-router";
import {baseURL} from "@/request/index.js";
const router=useRouter();
const playListStore=useplayListStore();
const songsStore=useSongsStore();
const HighqualityList=ref([]);
const albumDetail=usealbumDetailStore();
const HotList=ref([]);

const  getHighqualityList=()=>{  //获取精选歌单
  axios.post(baseURL+"/top/playlist/highquality?limit=5").then((res)=>{
    // console.log(res);
    HighqualityList.value=res.data.playlists;
  })
}
const  gethotList=()=>{  //获取最新专辑
  axios.post(baseURL+"/album/new?area=ALL&limit=10").then((res)=>{
    // console.log(res);
   HotList.value=res.data.albums;
  })
}
getHighqualityList();
gethotList();

function getListdetail(id){
  playListStore.getcurrentplayList(id);
  router.push({path: '/homePage/songsList/1'});
}
function getalbumdetail(id){
  albumDetail.getalbumDetail(id);
  router.push({path:"/homePage/AlbumDetail/1"})
}
</script>

<style scoped>
.box4{
  width: 100%;
  height: 450px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.highbox{
  display: flex;
  flex-wrap:wrap;
}
.highbox .highList{
  width: 200px;
  height: 250px;
  margin-left: 30px;
  margin-top: 20px;
  transition:All 0.4s ease-in-out;
  cursor: pointer;

}

.highbox .highList:hover{
  color: #8e09dc;
  transform:translate(0,-20px);
}
.highbox .highList .img{
  width: 200px;
}
.hotbox{
  display: flex;
  flex-wrap:wrap;
}
.hotbox .hotList{
  width: 200px;
  height: 250px;
  margin-left: 30px;
  margin-top: 20px;
  transition:All 0.4s ease-in-out;
  cursor: pointer;

}
.hotbox .hotList:hover{
  color: #8e09dc;
  transform:translate(0,-20px);
}
.hotbox .hotList .img{
  width: 200px;
}
</style>